$(function () {

	var pageSize = 5;
	var currentPage = 1;  //当前页 

	var currentId = null; //当前要操作数据id
	var isDelete = null;  //当前数据要进行操作

	// 去后台获取第一屏数据并渲染 
	// 1获取数据并渲染方法
	function render() {
		$.ajax({
			url: '/user/queryUser',
			data: {
				page: currentPage,
				pageSize: pageSize
			},
			dataType: 'json',
			success: function (info) {
				console.log(info);
				//渲染
				$('tbody').html(template('tmp', info));
				// 把后台返回总数 生成分页标签
				setPage(info.total);
			}
		})
	}
	render();



	// 2生成分页标签的方法
	function setPage(total) {
		$("#paginator").bootstrapPaginator({
			bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
			currentPage: currentPage,//当前页
			totalPages: Math.ceil(total / pageSize),//总页数          
			onPageClicked: function (event, originalEvent, type, page) {
				//为按钮绑定点击事件 page:当前点击的按钮对应页码
				// console.log(page);  
				currentPage = page;
				//请求对应页码的数据，重新渲染
				render();
			}
		});
	}

	

	//3-点击操作按钮时，记录当前的数据，以要进行的操作 
	// div.dataset.id  dom的方法 
	$('tbody').on('click', '.btn', function () {
		//保持id
		// currentId = $(this).parent().attr('data-id');
		// data-id 自定义属性 在jquery中可以通过$('div').data('id');
		currentId = $(this).parent().data('id');
		// console.log(currentId);
		// 记录禁用还启用
		isDelete = $(this).hasClass('btn-success') ? 1 : 0;

	})



	//4- 点击模态框的确定按钮， 对当前数据进行操作 
	$('.btn-yes').click(function () {
		//向后台发生ajax请求，禁用或者启用指定id用户
		$.ajax({
			url: '/user/updateUser',
			type: 'post',
			data: {
				id: currentId,
				isDelete: isDelete
			},
			dataType: 'json',
			success: function (info) {
				//重新渲染当前页
				render();
				//隐藏模态框
				$('.modal-delete').modal('hide');
			}
		})
	});
})